<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>销售漏斗管理</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>销售漏斗管理</h1>

    <!-- 销售阶段更新表单 -->
    <h2>更新销售阶段</h2>
    <form action="/sales/manage" method="POST">
        <div class="form-group">
            <label for="opportunityId">销售阶段 ID:</label>
            <input type="number" id="opportunityId" name="opportunityId" class="form-control" required>
        </div>

        <div class="form-group">
            <label for="newStatus">新阶段:</label>
            <select id="newStatus" name="newStatus" class="form-control">
                <option value="潜在客户">潜在客户</option>
                <option value="需求确认">需求确认</option>
                <option value="合同签署">合同签署</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary">更新</button>
    </form>

    <!-- 显示更新成功消息 -->
    <div th:if="${message}">
        <p th:text="${message}" class="alert alert-success"></p>
    </div>

    <!-- 查看销售阶段变更历史 -->
    <h2>查看销售阶段变更历史</h2>
    <form action="/sales/funnel/history" method="get">
        销售阶段 ID: <input type="number" name="opportunityId" required><br>
        <button type="submit">查看</button>
    </form>

    <!-- 显示销售阶段变更历史 -->
    <h3>销售阶段变更历史</h3>
    <table class="table" th:if="${history}">
        <thead>
        <tr>
            <th>旧阶段</th>
            <th>新阶段</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="funnel : ${history}">
            <td th:text="${funnel.previousStatus}">旧阶段</td>
            <td th:text="${funnel.currentStatus}">新阶段</td>
            <td th:text="${#temporals.format(funnel.changedAt, 'yyyy-MM-dd HH:mm:ss')}">时间</td>


        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
